<template>
  <div class="header">
    <div class="header_top">
      <ul class="navbar-nav">
        <li>
          <router-link to="/home">首页</router-link>
        </li>
        <li>
          <router-link to="/gasoline">汽油原料实时价格评价库</router-link>
        </li>
        <li>
          <router-link to="/gasolineCount" @click="loading()">汽油调合计划调度优化云计算(单批次版)</router-link>
        </li>
        <li>
          <router-link to="" @click="loading()">汽油调合计划调度优化云计算(长周期版)</router-link>
        </li>
        <!--          <li>-->
        <!--            <router-link to="/gasoline">柴油原料实时价格评价库</router-link>-->
        <!--          </li>-->
        <!--          <li>-->
        <!--            <router-link to="/gasolineCount" @click="loading()">柴油调合计划调度优化云计算(单批次版)</router-link>-->
        <!--          </li>-->
        <li>
          <router-link to="" @click="loading()">油品在线调合优化</router-link>
        </li>
        <li>
          <router-link to="phone" @click="loading()">联系我们</router-link>
        </li>
        <li style="display: flex" v-if="pageType==1||pageType==2">
          <!--              <router-link to="/login"><el-button type="success" size="mini" :disabled="pageType==1">联系我们</el-button></router-link>-->
          <router-link to="/login">
            <el-button type="success" size="mini" :disabled="pageType==1">登录</el-button>
          </router-link>
          <router-link to="/register">
            <el-button type="danger" size="mini" :disabled="pageType==2">注册</el-button>
          </router-link>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    pageType: { //1login，2register
      type: String,
      required: false
    }
  }
}
</script>
<style scoped>
.header {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 30px;
  background-color: #0E6ECA;
}
  @media screen and (max-width: 1000px) {
    .header{
      overflow-x: auto;
    }
  }
  @media screen and (min-width: 1000px) {
    .header{
  overflow-x: hidden;
    }
  }
.header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  width: 1850px;

}

.navbar-nav {
  width: 100%;
  margin: 0 auto;
  list-style: none;
  display: flex;
}

.navbar-nav li {
  margin: 0 10px;
}

.navbar-nav li a {
  color: white;
  text-decoration: none;
  font-size: 12px;
  padding: 10px 15px;
  display: block;
}

.navbar-nav li a:hover {
  text-decoration: underline;
}

span {
  color: white;
  text-decoration: none;
  font-size: 12px;
  padding: 10px 15px;
  display: block;
}

</style>
